<template>
	<view class="personal-content">
		<view>
			<ikz-login :show-data="loginData" :css-data="login_css"></ikz-login>
		</view>

		<!-- 用户信息 -->
		<!-- <view class="user-info">
			<view class="user-bg">
				<image src="/static/forum/circleBg.png" mode="scaleToFill"></image>
			</view>
			<view class="user-message">
				<view class="user-avatar">
					<image :src="userInfo.avatar"></image>
				</view>
				<view class="user-title">
					<view class="user-name">{{ userInfo.nickname }}</view>
					<view class="user-like">{{ userPhone }}</view>
				</view>
			</view>
		</view> -->
		<!-- 导航栏 -->
		<view class="nav-content">
			<view class="func-title">功能模块</view>
			<view class="nav-list">
				<view class="nav-data" v-for="(item, index) in nav_data" :key="item.id" @click="toDetail(index)">
					<view class="mount">{{ item.mount }}</view>
					<view class="title">{{ item.title }}</view>
				</view>
				<view class="line"></view>
			</view>
		</view>


		<view class="ikz-menu-box nav-content">
			<view class="func-title">系统中心</view>
			<ikz-menu :show-data="menu_data" :css-data="menu_css"></ikz-menu>
			<view class="line"></view>
		</view>

		<!-- 缺省 -->
		<view class="default-height" style="width: 100%;height: 92rpx;"></view>
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>
	</view>
</template>

<script>
var app = getApp()
import ikzLogin from "@/pages/Component/Public/Login/public/login/login.vue";
import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue'
import ikz from '@/pages/Common/tools.js'
import ikzMenu from "@/pages/Component/Public/Menu/public/menu/menu.vue";
export default {
	components: {
		ikzTabbar,
		ikzMenu,
		ikzLogin
	},
	data() {
		return {
			menu_css: {
				background_color: "#fff",
				bg_border_radius: 0,
				border_radius: "50%",
				color: "#888888",
				margin_top: 15,
				num: "4",
				width: 100,
			},
			menu_data: {
				list: [
					// {
					// 	src: '/static/supermarket/user/icon_tel.png',
					// 	title: '商家入驻',
					// 	url: {
					// 		path: "phone#" + app.globalData.customer_mobile,
					// 		info: '无功能',
					// 		mode: '5'
					// 	}
					// },
					{
						src: "/static/personal/about.png",
						title: "关于我们",
						url: {
							path: "/pages/Component/Module/Other/Program/about/index",
							info: "无功能",
							mode: "2",
						},
					},
					{
						src: "/static/personal/phone.png",
						title: "校内客服",
						url: {
							path: "phone#" + app.globalData.customer_mobile,
							info: "无功能",
							mode: "5",
						},
					},
					{
						src: "/static/personal/wechat.png",
						title: "平台客服",
						url: {
							path: "contact",
							info: "无功能",
							mode: "5",
						},
					},
					// {
					// 	src: "/static/personal/cooperation.png",
					// 	title: "合作加盟",
					// 	url: {
					// 		path: "phone#" + app.globalData.customer_mobile,
					// 		info: "无功能",
					// 		mode: "5",
					// 	},
					// },
					{
						src: "/static/personal/agree.png",
						title: "用户协议",
						url: {
							path: "/pages/Component/Module/Other/Program/agreement/index",
							info: "无功能",
							mode: "2",
						},
					},
					{
						src: "/static/personal/help.png",
						title: "帮助中心",
						url: {
							path: "/pages/Component/Module/Other/Program/help/index/index",
							info: "无功能",
							mode: "2",
						},
					},
					{
						src: "/static/personal/feedback.png",
						title: "意见反馈",
						url: {
							path: "/pages/Component/Module/Other/Program/feedback/index",
							info: "无功能",
							mode: "2",
						},
					},
					// {
					// 	src: "/static/personal/address.png",
					// 	title: "地址管理",
					// 	url: {
					// 		path: "/pages/Component/Module/Address/Program/myAddress/index",
					// 		info: "token",
					// 		mode: "2",
					// 	},
					// },
				],
			},
			userInfo: {}, //用户信息
			userPhone: undefined,
			nav_data: [{
				id: 1,
				mount: 0,
				title: '我的帖子',
				url: '/pages/Component/forum/Program/personal/nav-menu/myposts',
			},
			{
				id: 2,
				mount: 0,
				title: '我的频道',
				url: '/pages/Component/forum/Program/personal/nav-menu/mycircle',
			},
			{
				id: 3,
				mount: 0,
				title: '我的收藏',
				url: '/pages/Component/forum/Program/personal/nav-menu/mylike?status=1',
			},
			{
				id: 4,
				mount: 0,
				title: '我的点赞',
				url: '/pages/Component/forum/Program/personal/nav-menu/mylike?status=2',
			},
			],
			tabbar_Data: {
				type: 3,
				list: [{
					title: '首页',
					url: '/pages/Component/forum/Program/index/index',
					iconPath: '/static/forum/tabbar/index.png',
					selectedIconPath: '/static/forum/tabbar/index-check.png',
					status: 1,
				},
				{
					title: '频道',
					url: '/pages/Component/forum/Program/circle/circle',
					iconPath: '/static/forum/tabbar/circle.png',
					selectedIconPath: '/static/forum/tabbar/circle-check.png',
					status: 1,
				},
				{
					title: '发布',
					url: '/pages/Component/forum/Program/release/release',
					iconPath: '/static/forum/tabbar/release.png',
					selectedIconPath: '/static/forum/tabbar/release-check.png',
					status: 1,
				},
				{
					title: '我的',
					url: '/pages/Component/forum/Program/personal/personal',
					iconPath: '/static/forum/tabbar/mine.png',
					selectedIconPath: '/static/forum/tabbar/mine-check.png',
					status: 1,
				},
				],
			},
			btnList: ['1', '2', '3', '4', '5', '6'],
			loginData: {},
		}
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('user_info')
		this.userPhone = app.globalData.mobile || ''
		this.getQuantity()
	},
	onShow() {
		this.getQuantity()
		uni.hideHomeButton()
		this.loginData.user_openinfo = uni.getStorageSync("user_info");
		this.loginData.mobile =
			app.globalData.mobile || uni.getStorageSync("user_info").mobile;
	},
	computed: {
		emptyBtn() {
			if (this.btnList.length % 4 == 0) {
				return 0
			}
			return 4 - (this.btnList.length % 4)
		},
	},
	methods: {
		// 跳转页面
		toDetail(index) {
			uni.navigateTo({
				url: this.nav_data[index].url,
			})
		},
		// 获取我关注的数量
		getQuantity() {
			let path = '/xyb/posts/posts/quantity'
			let data = {
				token: uni.getStorageSync('local_user_session'),
			}
			ikz.requestPost(path, data, res => {
				if (res.statusCode == 200) {
					this.nav_data[0].mount = res.data.data.posts
					this.nav_data[1].mount = res.data.data.circle
					this.nav_data[2].mount = res.data.data.collection
					this.nav_data[3].mount = res.data.data.give
				}
			})
		},
	},
}
</script>

<style lang="scss">



/* 颜色变量 */
$primary-color: #ff5f15;
$secondary-color: #f8f9ff;
$accent-color: #6c8aff;
$text-color: #333;
$light-text: #666;
$border-radius: 24rpx;
$shadow: 0 8rpx 30rpx rgba(74, 108, 247, 0.1);
$shadow-color: rgba(0, 0, 0, 0.1);
$white: #fff;



.ikz-menu-box {
  width: 94%;
  margin: 20rpx auto 0;
  padding: 30rpx 0;
  background: $white;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx $shadow-color;
  overflow: hidden;
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx $shadow-color;
  }
}


page {
	background-color: $secondary-color;
	font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.personal-content {
	padding-bottom: 120rpx;

	/* 用户信息区域 */
	.user-info {
		position: relative;
		height: 360rpx;

		.user-bg {
			position: absolute;
			width: 100%;
			height: 100%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-message {
			position: relative;
			z-index: 2;
			display: flex;
			align-items: center;
			padding: 0 40rpx;
			height: 100%;

			.user-avatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: 4rpx solid white;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.user-title {
				flex: 1;
				margin-left: 30rpx;
				color: white;

				.user-name {
					font-size: 40rpx;
					font-weight: 600;
					margin-bottom: 10rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
				}

				.user-like {
					font-size: 28rpx;
					opacity: 0.9;
				}
			}
		}
	}

	/* 功能模块区域 */
	.nav-content {
		background: white;
		border-radius: $border-radius;
		margin: 30rpx;
		padding: 30rpx;
		box-shadow: $shadow;

		.func-title {
			font-size: 32rpx;
			font-weight: 600;
			color: $primary-color;
			margin-bottom: 30rpx;
			position: relative;
			padding-left: 20rpx;

			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 8rpx;
				height: 36rpx;
				background: $primary-color;
				border-radius: 4rpx;
			}
		}

		.nav-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;
			position: relative;

			.line {
				position: absolute;
				top: 50%;
				left: 5%;
				width: 90%;
				height: 1rpx;
				background: rgba(0, 0, 0, 0.1);
			}

			.nav-data {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 30rpx 0;
				transition: all 0.3s;

				&:active {
					background: rgba($primary-color, 0.05);
					border-radius: 12rpx;
				}

				.mount {
					font-size: 44rpx;
					font-weight: 600;
					color: $primary-color;
					margin-bottom: 10rpx;
				}

				.title {
					font-size: 28rpx;
					color: $light-text;
				}
			}
		}
	}
}
</style>